<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{{ title }}</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link href="/css/bootstrap.min.css" rel="stylesheet">
    <link href="/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="http://libs.useso.com/css?family=Open+Sans:400italic,600italic,400,600"
        rel="stylesheet">
    <link href="/css/font-awesome.css" rel="stylesheet">
    <link href="/css/style.css" rel="stylesheet">
    
    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>
    <div class="navbar navbar-fixed-top">
        <div class="navbar-inner">
            <div class="container">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"><span
                    class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
                </a><a class="brand" href="#">汪星统计</a>
                <div class="nav-collapse">
                    <ul class="nav pull-right">
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                            class="icon-cog"></i> 通用 <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;">设置</a></li>
                                <li><a href="javascript:;">帮助</a></li>
                            </ul>
                        </li>
                        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><i
                            class="icon-user"></i> 个人 <b class="caret"></b></a>
                            <ul class="dropdown-menu">
                                <li><a href="javascript:;">资料</a></li>
                                <li><a href="javascript:;">退出</a></li>
                            </ul>
                        </li>
                    </ul>
                    <form class="navbar-search pull-right">
                    <input type="text" class="search-query" placeholder="搜索">
                    </form>
                </div>
                <!--/.nav-collapse -->
            </div>
            <!-- /container -->
        </div>
        <!-- /navbar-inner -->
    </div>
    <!-- /navbar -->
    <div class="subnavbar">
        <div class="subnavbar-inner">
            <div class="container">
                <ul class="mainnav">
                    <li class="active"><a href="charts.html"><i class="icon-bar-chart"></i><span>图表</span> </a>
                    </li>
                </ul>
            </div>
            <!-- /container -->
        </div>
        <!-- /subnavbar-inner -->
    </div>
    <!-- /subnavbar -->
    <div class="main">
        <div class="main-inner">
            <div class="container">
                <div class="row">
                    <div class="span6">
                        <div class="widget">
                            <div class="widget-header">
                                <i class="icon-bar-chart"></i>
                                <h3>
                                    {{ bar }}</h3>
                            </div>
                            <!-- /widget-header -->
                            <div class="widget-content">
                                <canvas id="bar-chart" class="chart-holder" width="538" height="250">
                                </canvas>
                                <!-- /bar-chart -->
                            </div>
                            <!-- /widget-content -->
                        </div>
                        <!-- /widget -->
                        <div class="widget">
                            <div class="widget-header">
                                <i class="icon-bar-chart"></i>
                                <h3>
                                    {{ line }}</h3>
                            </div>
                            <!-- /widget-header -->
                            <div class="widget-content">
                                <canvas id="area-chart" class="chart-holder" width="538" height="250">
                                </canvas>
                                <!-- /line-chart -->
                            </div>
                            <!-- /widget-content -->
                        </div>
                        <!-- /widget -->
                      
                        <!-- /widget -->
                    </div>
                    <!-- /span6 -->
                    <div class="span6">
                        <div class="widget">
                            <div class="widget-header">
                                <i class="icon-bar-chart"></i>
                                <h3>
                                    {{ donut }}</h3>
                            </div>
                            <div class="widget-content">
                                <canvas id="donut-chart" class="chart-holder" width="538" height="250">
                                </canvas>
                            </div>
                        </div>
                          <div class="widget">
                            <div class="widget-header">
                                <i class="icon-bar-chart"></i>
                                <h3>
                                    {{ pie }}</h3>
                            </div>
                            <!-- /widget-header -->
                            <div class="widget-content">
                                <canvas id="pie-chart" class="chart-holder" width="538" height="250">
                                </canvas>
                                <!-- /pie-chart -->
                            </div>
                            <!-- /widget-content -->
                        </div>
                        <!-- <div class="widget">
                            <div class="widget-header">
                                <i class="icon-bar-chart"></i>
                                <h3>
                                    A Chart</h3>
                            </div>
                            <div class="widget-content">
                                <canvas id="line-chart" class="chart-holder" width="538" height="250">
                                </canvas>
                            </div>
                        </div> -->
                    </div>
                    <!-- /span6 -->
                </div>
                <!-- /row -->
            </div>
            <!-- /container -->
        </div>
        <!-- /main-inner -->
    </div>
    <!-- /main -->
    <div class="extra">
        <div class="extra-inner">
            <div class="container">
                <div class="row">
                    <div class="span3">
                        <h4>
                            关于汪星统计</h4>
                        <ul>
                            <li><a href="http://weibo.com/xiaokeji2013">制作</a></li>
                            <!-- <li><a href="javascript:;">Web Development Resources</a></li>
                            <li><a href="javascript:;">Responsive HTML5 Portfolio Templates</a></li>
                            <li><a href="javascript:;">Free Resources and Scripts</a></li> -->
                        </ul>
                        <p>这是我闲来无事做的
                        <br>主要是为了看看哪种狗价格最高
                        <br>不过我也不会买的
                        </p>

                    </div>
                    <div class="span3">
                        <h4>
                            关于宠物</h4>
                            <p>请友善的对待他们</p>
                            <p>如果不能照顾他们一生就不要认识他们</p>
                    </div>
                    <div class="span3">
                        <h4>
                            技术相关</h4>
                        <ul>
                            <li><a href=" #">django</a></li>
                            <li><a href="#;">SQL</a></li>
                            <li><a href="#;">HTML5</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!-- /container -->
        </div>
        <!-- /extra-inner -->
    </div>
    <!-- /extra -->
    <div class="footer">
        <div class="footer-inner">
            <div class="container">
                <div class="row">
                    <div class="span12">
                        &copy; 2015 <a href="http://www.bootcss.com/">power by Bootstrap</a>.
                    </div>
                    <!-- /span12 -->
                </div>
                <!-- /row -->
            </div>
            <!-- /container -->
        </div>
        <!-- /footer-inner -->
    </div>
    <!-- /footer -->
    <!-- Le javascript
================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="/js/jquery-1.7.2.min.js"></script>
    <script src="/js/excanvas.min.js"></script>
    <script src="/js/chart.min.js" type="text/javascript"></script>
    <script src="/js/bootstrap.js"></script>
    <script src="/js/base.js"></script>
    <script>
        var doughnutData = [
				{
				    value: 30,
				    color: "#F7464A"
				},
				{
				    value: 50,
				    color: "#46BFBD"
				},
				{
				    value: 100,
				    color: "#FDB45C"
				},
				{
				    value: 40,
				    color: "#949FB1"
				},
				{
				    value: 120,
				    color: "#4D5360"
				}

			];

        var myDoughnut = new Chart(document.getElementById("donut-chart").getContext("2d")).Doughnut(doughnutData);


        var lineChartData = {
        labels : [
            {% for i in m %}
                '{{ i.breed }}',
            {% endfor %}
        ], //X轴 坐标            
        datasets: [
				{
				    fillColor: "rgba(220,220,220,0.5)",
				    strokeColor: "rgba(220,220,220,1)",
				    pointColor: "rgba(220,220,220,1)",
				    pointStrokeColor: "#fff",
				    data: [
                    {% for i in m %}
                        {{ i.price }},
                    {% endfor %}
                    ],
				}
				// {
				//     fillColor: "rgba(151,187,205,0.5)",
				//     strokeColor: "rgba(151,187,205,1)",
				//     pointColor: "rgba(151,187,205,1)",
				//     pointStrokeColor: "#fff",
				//     data: [28, 48, 40, 19, 96, 27, 100]
				// }
			]

        }
var defaults = {
                
    //Boolean - If we show the scale above the chart data     
    scaleOverlay : false,
    
    //Boolean - If we want to override with a hard coded scale
    scaleOverride : false,
    
    //** Required if scaleOverride is true **
    //Number - The number of steps in a hard coded scale
    scaleSteps : null,
    
    //Number - The value jump in the hard coded scale
    scaleStepWidth : 20,
    
    // Y 轴的起始值
    scaleStartValue : null,

    // Y/X轴的颜色
    scaleLineColor : "rgba(0,0,0,.1)",
    
    // X,Y轴的宽度
    scaleLineWidth : 1,

    // 刻度是否显示标签, 即Y轴上是否显示文字
    scaleShowLabels : true,
    
    // Y轴上的刻度,即文字
    scaleLabel : "<%=value%>",
    
    // 字体
    scaleFontFamily : "'Arial'",
    
    // 文字大小
    scaleFontSize : 12,
    
    // 文字样式
    scaleFontStyle : "normal",
    
    // 文字颜色
    scaleFontColor : "#666",  
    
    // 是否显示网格
    scaleShowGridLines : false,
    
    // 网格颜色
    scaleGridLineColor : "rgba(0,0,0,.05)",
    
    // 网格宽度
    scaleGridLineWidth : 2, 
    
    // 是否使用贝塞尔曲线? 即:线条是否弯曲
    bezierCurve : false,
    
    // 是否显示点数
    pointDot : true,
    
    // 圆点的大小
    pointDotRadius : 8,
    
    // 圆点的笔触宽度, 即:圆点外层白色大小
    pointDotStrokeWidth : 2,
    
    // 数据集行程
    datasetStroke : true,
    
    // 线条的宽度, 即:数据集
    datasetStrokeWidth : 2,
    
    // 是否填充数据集
    datasetFill : false,
    
    // 是否执行动画
    animation : true,

    // 动画的时间
    animationSteps : 60,
    
    // 动画的特效
    animationEasing : "easeOutQuart",

    // 动画完成时的执行函数
    onAnimationComplete : null
    
}
        var myLine = new Chart(document.getElementById("area-chart").getContext("2d")).Line(lineChartData,defaults);


        var barChartData = {
            labels: ["January", "February", "March", "April", "May", "June", "July"],
            datasets: [
				{
				    fillColor: "rgba(220,220,220,0.5)",
				    strokeColor: "rgba(220,220,220,1)",
				    data: [65, 59, 90, 81, 56, 55, 40]
				},
				{
				    fillColor: "rgba(151,187,205,0.5)",
				    strokeColor: "rgba(151,187,205,1)",
				    data: [28, 48, 40, 19, 96, 27, 100]
				}
			]

        }

var myLine = new Chart(document.getElementById("bar-chart").getContext("2d")).Bar(barChartData);

var pieData = [
				{
				    value: 30,
				    color: "#F38630"
				},
				{
				    value: 50,
				    color: "#E0E4CC"
				},
				{
				    value: 100,
				    color: "#69D2E7"
				}

			];

				var myPie = new Chart(document.getElementById("pie-chart").getContext("2d")).Pie(pieData);

				var chartData = [
			{
			    value: Math.random(),
			    color: "#D97041"
			},
			{
			    value: Math.random(),
			    color: "#C7604C"
			},
			{
			    value: Math.random(),
			    color: "#21323D"
			},
			{
			    value: Math.random(),
			    color: "#9D9B7F"
			},
			{
			    value: Math.random(),
			    color: "#7D4F6D"
			},
			{
			    value: Math.random(),
			    color: "#584A5E"
			}
		];
				var myPolarArea = new Chart(document.getElementById("line-chart").getContext("2d")).PolarArea(chartData);
	</script>
</body>
</html>
